import { getRemBase } from '@/utils/rem';

export const useRem = () => {
  const remBase = ref(0);

  const resizeHandle = () => {
    remBase.value = getRemBase();
  };

  const px2Rem = (val: number) => {
    return val * remBase.value;
  };

  const px2CssRem = (val: number) => val / 4 + 'rem';

  resizeHandle();

  onMounted(() => {
    window.addEventListener('resize', resizeHandle);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', resizeHandle);
  });

  return { remBase, px2Rem, px2CssRem };
};
